<!--
 * @Author: hua
 * @Date: 2020-07-21 15:21:54
 * @description: 
 * @LastEditors: hua
 * @LastEditTime: 2020-07-23 09:18:15
--> 
<template>
  <!--内容-->
  <div class="container">
    <el-form :label-position="'left'" :model="reqData" ref="Form" label-width="170px" class="form">
      <el-form-item
        :label="$t('shippingBoxQR')"
        prop="bigBoxQrCode"
        :rules="[
            { required: true, message: `${$t('shippingBoxQR')} ${$t('isRequired')}`}
          ]"
      >
        <el-input
          id="inputShippingBoxQR"
          autofocus
          v-model="reqData.bigBoxQrCode"
          :placeholder="$t('inputShippingBoxQR')"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="$t('boxQR')"
        prop="smallBoxQrCode"
        :rules="[
            { required: true, message: `${$t('boxQR')} ${$t('isRequired')}`}
          ]"
      >
        <el-input v-model="reqData.smallBoxQrCode" :placeholder="$t('inputBoxQR')"></el-input>
      </el-form-item>
      <el-form-item class="reverse">
        <el-button type="primary" @click="onSubmit">{{$t("bind")}}</el-button>
      </el-form-item>
    </el-form>
    <!-- 描述 -->
    <el-card class="box-card" style=" width: 80%;">
      <div slot="header" class="clearfix">
        <span>{{$t('functionDescription')}}</span>
      </div>
      <div class="text item">{{$t('someDescription')}}</div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Message, MessageBox } from "element-ui";
import { isvalidUsername } from "@/utils/validate";
import { bindBigBoxQrCode } from "@/api/lock";
export default {
  data() {
    return {
      reqData: {
        appUserId: "",
        bigBoxQrCode: "",
        smallBoxQrCode: "",
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo", "productionBatch"]),
  },
  mounted() {
    let inputelement = document.getElementById("inputShippingBoxQR");
    inputelement.focus();
  },
  methods: {
    onSubmit() {
      if (!this.productionBatch.id) {
        MessageBox.confirm(this.$t("productionBatchError"), this.$t("error"), {
          confirmButtonText: this.$t("button.ok"),
          cancelButtonText: this.$t("button.cancel"),
          type: "warning",
        }).then(() => {
          this.$router.push({ name: "chooseProductionPlan" });
        });
        return;
      }
      this.$refs["Form"].validate((valid) => {
        if (valid) {
          this.reqData.appUserId = this.userInfo.id;
          bindBigBoxQrCode(
            this.reqData.appUserId,
            this.reqData.bigBoxQrCode,
            this.reqData.smallBoxQrCode,
            this.productionBatch.id
          ).then((res) => {
            console.log(res.body);
            Message({
              message: `${this.$t("bindSuccess") + " " + this.$t("success")}`,
              type: "success",
              duration: 5 * 1000,
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.form {
  width: 80%;
}
.reverse {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
@media (max-width: 500px) {
  .left_container {
    flex: 65px 0 0;
  }
}
</style>
